<template>
  <router-view />
  <van-tabbar route active-color="#eb1f69">
    <van-tabbar-item replace to="/main"
      ><span>首页</span>
      <template #icon="props">
        <img :src="props.active ? icon.s_main : icon.a_main" /> </template
    ></van-tabbar-item>
    <van-tabbar-item replace to="/order"
      ><span>点餐</span>
      <template #icon="props">
        <img :src="props.active ? icon.s_order : icon.a_order" /> </template
    ></van-tabbar-item>
    <van-tabbar-item replace to="/take"
      ><span>取餐</span>
      <template #icon="props">
        <img :src="props.active ? icon.s_take : icon.a_take" /> </template
    ></van-tabbar-item>
    <van-tabbar-item replace to="/mine"
      ><span>我的</span>
      <template #icon="props">
        <img :src="props.active ? icon.s_mine : icon.a_mine" /> </template
    ></van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    const state = reactive({
      active: 0,
      icon: {
        a_main: require("../assets/image/main_active.png"),
        s_main: require("../assets/image/main_inactive.png"),
        a_order: require("../assets/image/order_active.png"),
        s_order: require("../assets/image/order_inactive.png"),
        a_take: require("../assets/image/take_active.png"),
        s_take: require("../assets/image/take_inactive.png"),
        a_mine: require("../assets/image/mine_active.png"),
        s_mine: require("../assets/image/mine_inactive.png"),
      },
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
</style>